<!DOCTYPE html>
<html class="x-admin-sm">
<!-- 导购员购买服务作品审核 查看详情页面 -->

<head>
    <meta charset="UTF-8">
    <title>购买服务作品审核详情页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <!-- <link href="css/newStyle.css" rel="stylesheet"> -->
    <!-- 弹窗轻提示 -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <!-- 引入jq -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <!-- <script type="text/javascript" src="./js/domain.js"></script> -->

    <style>
        body {
            background-color: #f9f9f9;
        }

        .nav {
            /* margin-left: 10px; */
            padding-left: 25px;
            /* margin-top: 20px; */
            background: #fff;
            height: 50px;
        }

        .nav .nav-navigation {
            display: flex;
            background: #fff;
        }

        .nav .nav-navigation li {
            padding: 5px 10px;
            margin: 5px;
            font-size: 14px;
            margin-right: 10px;
            margin-top: 8px;
            border: 1px solid #ccc;
            width: 85px;
            text-align: center;
            cursor: pointer;
        }

        .nav .nav-navigation li span {
            color: red;
        }

        .nav .nav-navigation li:hover {
            color: #1abc9c;
        }

        .nav .nav-navigation li:hover span {
            color: #1abc9c;
        }

        .nav .nav-navigation li.nav-active:hover {
            color: #fff;
        }

        .nav .nav-navigation li.nav-active:hover span {
            color: #fff;
        }

        .guide_look:hover {
            text-decoration: underline;
        }

        .nav-active {
            background-color: #1abc9c;
            color: #fff;
        }

        .nav .nav-navigation li.nav-active span {
            /* background-color: #1abc9c; */
            color: #fff;
        }

        .x-nav {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 0.5px;
            height: 50px;
            line-height: 38px;
            background-color: #f3f3f3;
            border: 1px solid #e4e4e4;
            background: #f3f3f3;
        }

        .x-nav .goods_name {
            margin-left: 10px;
            color: #999;
            font-size: 15px;
            display: inline-block;
            margin-top: 5px;
        }

        .goodsRoload {
            margin-top: 6px !important;
            display: inline-block;
            margin-right: 80px;
            height: 32px;
            line-height: 50px;
            /* margin-top: -6px; */
            /* margin-left: 1434px; */
            width: 80px;
            font-size: #666 !important;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            color: #ccc;
            cursor: pointer;
        }

        .goods_name::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 12px;
            margin: 0 3px;
            background-color: #1abc9c;
        }

        .layui-table th,
        .layui-table td {
            min-width: 30px !important;
        }

        .search {
            border: 1px solid #eee;
            background-color: #f3f3f3;
            height: 50px;
        }

        .search_if {
            width: 100%;
            height: 50px;
            justify-content: space-between;
            align-items: center;
            display: flex;
            position: relative;
        }

        .search_if>span {
            color: #666;
            display: block;
            margin-left: 8px;
        }

        .search_if .choose_up {
            color: #666;
            cursor: pointer;
            position: absolute;
            right: 108px;
            top: 15.5px;
        }

        .search_row {
            height: 50px;
            background-color: #fff;
            border: 1px solid #eee;
        }

        .search_row .layui-inline {
            margin-right: 50px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .search_row span {
            color: #666;
            font-size: 14px;
            display: inline-block;
            position: relative;
            top: 5px;
            left: 6px;
            cursor: pointer;
        }

        .layui-fluid {
            background-color: #fff;
        }

        .layui-btn {
            font-size: 14px !important;
        }

        .layui-fluid {
            padding-top: 0 !important;
        }

        .layui-card-body {
            padding-top: 0px !important;
            /* margin-top: -8px !important; */
            position: relative;
        }

        .layui-table th {
            font-weight: bold;
            font-size: 20px;
        }

        .input_height {
            height: 35px !important;
            position: relative;
            top: -3px;
        }

        .layui-table-tool-self {
            display: none !important;
        }

        .user_list {
            position: absolute;
            top: 22px;
            left: 35px;
            z-index: 999;
        }

        .user_list span {
            color: #666;
        }

        .user_list img {
            width: 20px;
        }

        .layui-laypage-default {
            margin-left: 500px !important;
        }

        .layui-icon {
            cursor: pointer;
        }

        .laytable-cell-undefined {
            width: 120px !important;
        }

        .layui-col-space5 {
            position: relative;
        }

        .submit_btn {
            position: absolute;
            top: -50px;
            right: -30px;
        }

        .main_body {
            background-color: #fff;
            width: 80%;
            height: calc(100% -15px);
            /* padding: 0 100px; */
            /* margin-left: 112px; */
            margin: 0 auto !important;
        }

        .audit {
            height: 60px;
            background: #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border: 1px solid #ccc;
            border-top: none;
        }

        .info {
            /* height: 240px; */
            padding: 40px 26px 0 26px;
            border-left: 1px #ccc solid;
            border-right: 1px #ccc solid;
        }

        .none {
            display: none;
        }

        .wating_big_div {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 100%;
            display: table;
            z-index: 9999;
        }

        .zhezhao {
            opacity: 0.3;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
        }

        .wating_content_div {
            text-align: center;
            background: none;
            display: table-cell;
            vertical-align: middle;
        }

        .loadingBox {
            width: 150px;
            height: 160px;
            margin: 0 auto;
            background: #535353;
            border-radius: 8px;
        }

        .m-load2 {
            width: 36px;
            height: 36px;
            top: 40px;
            margin: 0px auto;
            transform: scale(1.3, 1.3);
        }

        .loading_text_box {
            color: #fff !important;
            margin-top: 75px !important;
        }

        .m-load2 {
            position: relative;
        }

        .m-load2 .line div {
            position: absolute;
            left: 16px;
            top: 0;
            width: 3px;
            height: 36px;
        }

        .m-load2 .line div:before,
        .m-load2 .line div:after {
            content: '';
            display: block;
            height: 50%;
            background: #fcfcfc;
            border-radius: 5px;
        }

        .m-load2 .line div:nth-child(2) {
            -webkit-transform: rotate(30deg);
        }

        .m-load2 .line div:nth-child(3) {
            -webkit-transform: rotate(60deg);
        }

        .m-load2 .line div:nth-child(4) {
            -webkit-transform: rotate(90deg);
        }

        .m-load2 .line div:nth-child(5) {
            -webkit-transform: rotate(120deg);
        }

        .m-load2 .line div:nth-child(6) {
            -webkit-transform: rotate(150deg);
        }

        .m-load2 .circlebg {
            position: absolute;
            left: 49%;
            top: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            background: #535353;
            border-radius: 18px;
        }

        /** 加载动画 **/
        @-webkit-keyframes load {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .m-load2 .line div:nth-child(1):before {
            -webkit-animation: load 1.2s linear 0s infinite;
        }

        .m-load2 .line div:nth-child(2):before {
            -webkit-animation: load 1.2s linear 0.1s infinite;
        }

        .m-load2 .line div:nth-child(3):before {
            -webkit-animation: load 1.2s linear 0.2s infinite;
        }

        .m-load2 .line div:nth-child(4):before {
            -webkit-animation: load 1.2s linear 0.3s infinite;
        }

        .m-load2 .line div:nth-child(5):before {
            -webkit-animation: load 1.2s linear 0.4s infinite;
        }

        .m-load2 .line div:nth-child(6):before {
            -webkit-animation: load 1.2s linear 0.5s infinite;
        }

        .m-load2 .line div:nth-child(1):after {
            -webkit-animation: load 1.2s linear 0.6s infinite;
        }

        .m-load2 .line div:nth-child(2):after {
            -webkit-animation: load 1.2s linear 0.7s infinite;
        }

        .m-load2 .line div:nth-child(3):after {
            -webkit-animation: load 1.2s linear 0.8s infinite;
        }

        .m-load2 .line div:nth-child(4):after {
            -webkit-animation: load 1.2s linear 0.9s infinite;
        }

        .m-load2 .line div:nth-child(5):after {
            -webkit-animation: load 1.2s linear 1s infinite;
        }

        .m-load2 .line div:nth-child(6):after {
            -webkit-animation: load 1.2s linear 1.1s infinite;
        }
    </style>
</head>

<body>
    <!-- 头部导航部分 -->
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <span class="goods_name">保购购买商品服务审核详情</span>
        </span>
        <a class=" layui-btn-small goodsRoload" style="line-height:1.6em;margin-top:3px;" onclick="location.reload()"
            title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i> 刷新
        </a>
    </div>
    <!-- 中间主题部分 -->
    <div class="main_body">
        <!-- 审核状态 -->
        <div class="audit">
            <p style="color: red;font-size: 16px;;"><img src="./images/tan.icon.png" alt=""
                    style="position: relative;top: -1px;"> 当前作品审核状态:<span class="now">待审核</span></p>
            <p style="font-size: 13px; color : #666; text-align: center; height: 25px;width: 80px; line-height: 25px; background-color: #fff;border: 1px solid #ccc;cursor: pointer;"
                class="cancel_order">备注订单</p>
        </div>
        <!-- 基本信息部分 -->
        <div class="info">
            <!-- 标题 -->
            <div class="title" style="color: #666;font-size: 16px;"><img src="./images/goods_icon.png" alt=""
                    style="position: relative; top: -2px;">基本信息</div>
            <!-- 表格部分 -->
            <!-- <table id="guideInfoTable" lay-filter="test"></table> -->
            <table
                style="width: 100%; height: 55px; border: 1px solid #ccc; margin-top: 10px; border-collapse: collapse ;">
                <thead>
                    <tr style="background-color: #eee;height: 30px; background-color: #F5F5F6 !important;">
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">服务订单编号
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">商家名称
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">商家账号
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">保购昵称
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">保购账号
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">订单状态
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="text-align: center; height: 60px; background-color: #eaf5fc;">
                        <td id="star" style="border:1px solid #ccc ; color: #666;"></td>
                        <td id="star1" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star2" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star3" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star4" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star5" style="border:1px solid #ccc; color: #666;"></td>
                    </tr>
                    <tr style="background-color: #eee;height: 30px; text-align: center; background-color: #F5F5F6 !important;">
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">作品内容
                        </td>
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">下单时间
                        </td>
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">接单时间
                        </td>
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">订单总额
                        </td>
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">作品数量
                        </td>
                        <td style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">支付方式
                        </td>
                    </tr>
                    <tr style="text-align: center; height: 60px; background-color: #eaf5fc;">
                        <td id="star6" style="border:1px solid #ccc ; color: #666;"></td>
                        <td id="star7" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star8" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star9" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star10" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="star11" style="border:1px solid #ccc; color: #666;"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 导购作品详情信息部分 -->
        <div class="info" style="height: 140px;">
            <div class="title" style="color: #666;font-size: 16px;"><img src="./images/goods_icon.png" alt=""
                    style="position: relative; top: -2px;">保购作品详情信息</div>
            <!-- 表格部分 -->
            <!-- <table id="guideWordsTable" lay-filter="test" style="width: 100%;"></table> -->
            <table
                style="width: 100%; height: 40px; border: 1px solid #ccc; margin-top: 10px; border-collapse: collapse ;">
                <thead>
                    <tr style="background-color: #eee;height: 30px; background-color: #F5F5F6 !important;">
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">关联商品
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">提交作品
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">最近提交时间
                        </th>
                        <th style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666;">提交次数
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="text-align: center; height: 80px; background-color: #eaf5fc;">
                        <td id="info" style="border:1px solid #ccc ; color: #666;"></td>
                        <td id="info1" style="border:1px solid #ccc; color: #666; text-align: center;">
                            <img src="#" alt="" class="img" style="width: 60px;height: 60px;"
                                onclick="previewImg(this)">
                            <video src="#" class="video" controls="controls" style="width: 60px;height: 60px;"></video>
                        </td>
                        <td id="info2" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="info3" style="border:1px solid #ccc; color: #666;"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 关联商品信息部分 -->
        <div class="info">
            <div class="title" style="color: #666;font-size: 16px;"><img src="./images/goods_icon.png" alt=""
                    style="position: relative; top: -2px;">关联商品信息</div>
            <!-- 表格部分 -->
            <table
                style="width: 100%; height: 55px;   border: 1px solid #ccc; margin-top: 10px; border-collapse: collapse ;">
                <thead>
                    <tr style="background-color: #eee;height: 30px; background-color: #F5F5F6 !important;">
                        <th
                            style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666; width: 260px;">
                            商品名称</th>
                        <th
                            style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666; width: 260px;">
                            品牌</th>
                        <th
                            style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666; width: 260px;">
                            价格/货号</th>
                        <th
                            style="padding:12px 0 !important;border:1px solid #ccc;font-weight: 600; color:#666; width: 260px;">
                            提成</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="text-align: center; height: 70px; background-color: #eaf5fc;">
                        <td id="goods" style="border:1px solid #ccc ; color: #666;"></td>
                        <td id="goods1" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="goods2" style="border:1px solid #ccc; color: #666;"></td>
                        <td id="goods3" style="border:1px solid #ccc; color: #666;"></td>
                    </tr>
                </tbody>
            </table>


        </div>
        <!-- 操作信息部分 -->
        <div class="info">
            <div class="title" style="color: #666;font-size: 16px;"><img src="./images/goods_icon.png" alt=""
                    style="position: relative; top: -2px;">操作信息</div>
            <!-- 表格部分 -->
            <table id="guideTable" lay-filter="test" style="width: 100%; "></table>
        </div>
    </div>


    <script>
        layui.use(['layedit', 'laydate', 'table', 'form'], function () {
            // var table = layui.table;
            var table = layui.table,
                form = layui.form,
                layer = layui.layer
            IsTokenSave();
            var userMessage = JSON.parse(sessionStorage.getItem("user_message"));

            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            }
            var buyMid = getUrlParam("id"); //购买商品服务列表id
            //购买商品服务货号
            //调用接口对本作品审核基本信息渲染
            Showload();
            $.ajax({
                type: 'get',
                url: urls + 'smallOrderStoreService/examineDetails', //基本信息渲染
                headers: {
                    'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                },
                data: { id: buyMid },
                success: function (res) {
                    // console.log(res)
                    CheckLogout(res); //检查是否登陆过
                    if (res.code == 0) {
                        // 判断审核状态
                        if (res.data.verify_status == 0) {
                            $('.now').text('待审核');
                            $('.now').css('color', '#ff9800')
                        } else if (res.data.verify_status == 1) {
                            $('.now').text('审核通过');
                            $('.now').css('color', 'green')
                        } else if (res.data.verify_status == 2) {
                            $('.now').text('审核不通过');
                        }
                        //基本信息
                        $('#star').text(res.data.order_serial_number)    //服务订单编号
                        $('#star1').text(res.data.store_name)    //商家名称
                        $('#star2').text(res.data.store_phone)   //商家账号
                        $('#star3').text(res.data.nickname)      //导购员昵称
                        $('#star4').text(res.data.account_phone) //导购员账号


                        if (res.data.take_status == 1) {
                            $('#star5').text('待接单')   //订单状态
                        } else if (res.data.take_status == 2) {
                            $('#star5').text('已接单')   //订单状态
                        } if (res.data.take_status == 3) {
                            $('#star5').text('已拒绝')   //订单状态
                        } if (res.data.take_status == 4) {
                            $('#star5').text('已发布')   //订单状态
                        } if (res.data.take_status == 5) {
                            $('#star5').text('订单超时')   //订单状态
                        }
                        if (res.data.work_form == 1) {
                            $('#star6').text('图片')   //作品内容
                        } else if (res.data.work_form == 2) {
                            $('#star6').text('视频')   //作品内容
                        }

                        $('#star7').text(res.data.pay_success_time)   //下单时间
                        $('#star8').text(res.data.order_time)   //接单时间
                        $('#star9').text(res.data.price)   //订单总额
                        $('#star10').text(1)  //作品数量
                        if (res.data.pay_type == 1) {
                            $('#star11').text('支付宝支付') //支付方式
                        } else if (res.data.pay_type == 2) {
                            $('#star11').text('微信支付') //支付方式
                        }
                        // 保购作品详细信息
                        $('#info').text(res.data.goods_name)
                        if (res.data.file_type == 1) {
                            $('#info1 .video').css('display', 'none');
                            $('#info1 .img').attr('src', imgUrl + res.data.fileUrl)
                        } else {
                            $('#info1 .img').css('display', 'none');
                            $('#info1 .video').attr('src', imgUrl + res.data.fileUrl)
                        }
                        $('#info2').text(res.data.create_time)
                        $('#info3').text(1)
                        // 关联商品信息
                        $('#goods').text(res.data.goods_name)
                        $('#goods1').text(res.data.brand_name)
                        $('#goods2').text(res.data.goods_price)
                        $('#goods3').text(res.data.price)
                    } else {
                        layer.msg(res.msg);
                    }
                    InitTime();
                }
            })
            //操作信息部分表格
            // table.render({
            //     elem: '#guideTable',
            //     // toolbar: '#guideListTableToolbar',
            //     cellMinWidth: 80,
            //     height: '600',
            //     url: domain + '' // 购买服务作品审核数据接口
            //     , method: 'get' //如果无需自定义HTTP类型，可不加该参数
            //     // , where: { token: token }
            //     , parseData: function (res) { //res 即为原始返回的数据
            //         return {
            //             "code": res.code, //解析接口状态
            //             "msg": res.msg, //解析提示文本
            //             "count": res.data.total, //解析数据长度
            //             "data": res.data.records //解析数据列表
            //         }
            //     },
            //     cols: [
            //         [ //表头
            //            {
            //                 field: 's',
            //                 edit: 'text',
            //                 title: '操作者',
            //                 align: 'center',
            //                 width: 130
            //             }, {
            //                 field: 'account_phone',
            //                 title: '操作时间',
            //                 align: 'center',
            //                 width: 160
            //             }, {
            //                 field: '',
            //                 title: '操作',
            //                 align: 'center',
            //                 width: 160
            //             }, {
            //                 field: '',
            //                 title: '备注',
            //                 align: 'center',
            //                 width: 160
            //             }
            //         ]
            //     ],
      
        })
    </script>
    <script>
        // 图片点击放大处理函数
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            //var height = img.height + 50; // 原图片大小
            //var width = img.width; //原图片大小
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose: true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
                }
            });
        }
    </script>
</body>

</html>